<template>
    <mi-form-page @submit="submit"
                  title="商品分类页样式"
                  v-model:show="edit.show"
                  :loading="edit.loading"
                  show-type="page"
    >

        <el-space alignment="flex-start">
            <div class="shadow">
                <img class="img" src="@/assets/image/diy_goods_cate.png">
            </div>
            <div class="edit_container">
                <el-form :model="edit.info"
                         ref="formRef"
                         :rules="rules">
                    <el-form-item label="分类模板">
                        <mi-radio v-model="edit.info.content.tpl" :options="pageTplOptions" />
                    </el-form-item>
                    <el-form-item label="广告位">
                        <el-space fill>
                            <mi-radio v-model="edit.info.content.is_ad_show" />
                            <div class="cms_box" v-if="edit.info.content.is_ad_show == 1">
                                <mi-panel
                                    class="mb10"
                                    v-for="(vo,i) in edit.info.content.ad_ul" :key="i"
                                    @close="removeLi(i)"
                                >
                                    <div class="d_flex flex_ai_c">
                                        <mi-up-image v-model="vo.image" size="48px" class="mr10" />
                                        <div>
                                            <div class="d_flex flex_ai_c">
                                                <label>链接</label>
                                                <url-select v-model="vo.url" />
                                            </div>
                                        </div>
                                    </div>
                                </mi-panel>
                                <div class="d_flex flex_jc_c">
                                    <el-button type="primary" @click="addLi">添加元素</el-button>
                                </div>
                            </div>
                        </el-space>
                    </el-form-item>
                    <el-form-item label="购物车按钮">
                        <mi-radio v-model="edit.info.content.is_cart_show" />
                    </el-form-item>
                </el-form>

            </div>
        </el-space>

    </mi-form-page>
</template>

<script setup lang="ts">

import {onBeforeMount, reactive, ref} from "vue";
import {simpleGet} from "@/utils/request";
import Edit from "@/model/edit";
import {FormInstance} from "element-plus";
import UrlSelect from "@/views/site/diy/components/UrlSelect/index.vue";

const pageTplOptions = [
    {id:'tpl_1', title:"分类+商品"},
    {id:'tpl_2', title:"一级分类"},
    {id:'tpl_3', title:"二级分类"},
    {id:'tpl_4', title:"三级分类"},
]

const rules = {}

const edit = reactive(new Edit({
    info: {
        page_type: 'goods_cate',
        content: {
            tpl:'tpl_1',
            is_ad_show:0,
            is_cart_show:0,
            ad_ul:[],
            use_type:1,
        }
    },
    show:true,
}))
const formRef = ref<FormInstance>()

const submit = () => {
    const url = `/site.diyPage/goodsCateEdit`
    edit.submit({
        formRef: formRef.value,
        url: url,
    }).then((res:any) => {
        // 更新id
        edit.info.id = res.info.id
    })
}

const addLi = () => {
    edit.info.content.ad_ul.push({})
}
const removeLi = (index:number) => {
    edit.info.content.ad_ul.splice(index,1)
}


onBeforeMount(() => {
    edit.init(async () => {
        const {info} = await simpleGet("/site.diyPage/goodsCateEdit")
        if (info){
            edit.info = info
        }
    })
})


</script>

<style scoped lang="scss">
.edit_container{

}

.cms_box{
    padding: 10px;
    label{
        width: 32px;
    }
}
.style_box{
    padding: 10px;
    .el-input-number{
        width: 100% !important;
    }
    .el-row{
        width: 100%;
    }
}
</style>
